// pages/components/my-swiper.js
Component({
    options: {
        addGlobalClass: true,
    },
    /**
     * 组件的属性列表
     */
    properties: {
        // 这里定义了属性，属性值可以在组件使用时指定
        color: {
            type: String,
            value: 'white',
        },
        type:{
            type:String,
            value:'input'
        },
        showScore:{
            type:Number,
            value:0,
            observer:'onValueChange'
        },
        clickAble:{
            type:Boolean,
            value:false
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        stars: [0, 1, 2, 3, 4],
        normalSrc: '../../image/no_star.svg',
        selectedSrc: '../../image/full_star.svg',
        halfSrc:'../../image/half_star.svg',
        result: 0,//评分
    },

    lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名

        moved: function () {
        },
        detached: function () {
        },
    },

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached:  function() {
        console.log('component star-bar attached');
        this.init();
    },

    /**
     * 组件的方法列表
     */
    methods: {

        /*setShowScore:function(score){
            this.setData({showScore:score},()=>{
                this.init();
            })
        },*/



        onValueChange:function(newVal, oldVal, changedPath){
            console.log({newVal, oldVal, changedPath});
            this.setData({showScore:newVal},()=>{
                this.init();
            });
        },

        init:function(){
            let color = this.data.color;
            let showScore = this.data.showScore+0;
            if(!showScore){
                showScore=0;
            }
            switch (color) {
                case 'black':
                    this.setData({
                        selectedSrc:'../../image/full_star_black.svg',
                        halfSrc:'../../image/half_star_black.svg',
                        result:showScore/2
                    });
                    break;
                case 'grey':
                    this.setData({
                        selectedSrc:'../../image/full_star_grey.svg',
                        halfSrc:'../../image/half_star_grey.svg',
                        result:showScore/2
                    });
                    break;
                case 'grey-inner':
                    this.setData({
                        normalSrc:'../../image/full_star_gray_inner.svg',
                    });
                    break;
                case 'white':
                    this.setData({
                        result:showScore/2
                    });
                    break;
            }
           /* console.log('star-bar attached color is:'+color);
            console.log('star-bar data is:');
            console.log(this.data);*/
        },
        //点击左边,半颗星
        selectLeft: function (e) {
            if(!this.data.clickAble){
                this.triggerEvent('sendResult', {
                    score: -1
                }, {});
            }else{
                let result = e.currentTarget.dataset.key;
                if (this.data.key === 0.5 && result === '0.5') {
                    //只有一颗星的时候,再次点击,变为0颗
                    result = 0;
                }
                this.setData({result},()=>{
                    this.triggerEvent('sendResult', {
                        score: result*2
                    }, {});
                });
            }
        },
        //点击右边,整颗星
        selectRight: function (e) {
            if(!this.data.clickAble){
                this.triggerEvent('sendResult', {
                    score: -1
                }, {});
            }else{
                let result = e.currentTarget.dataset.key;
                this.setData({result},()=>{
                    this.triggerEvent('sendResult', {
                        score: result*2
                    }, {});
                });
            }
        }
    }
});
